<template name="pintuanBottom">
	<view class="goodBtm">
		<text class="stockNull" v-if="resouceData.leftSeconds<1">该活动已结束</text>
		<view class="goodOp">
			<!-- #ifndef H5 -->
			<view class="item" @tap="zixun">
				<text class="iconfont icon-message"></text>
				<text>咨询</text>
			</view>
			<!-- #endif -->
			
			<view class="item" @tap="toPage" :data-id="shopInfo.id" data-url="shopDetail">
				<text class="iconfont icon-shoucangdianjia"></text>
				<text>店铺</text>
			</view>
			
			<!-- <view class="item" @tap="guanzhu">
				<text class="iconfont" :class="[goodData.fav==1?'icon-likefill':'icon-like']"></text>
				<text>{{goodData.fav==1?'已关注':'关注'}}</text>
			</view> -->
			
			<view class="btnBox">
				<button @tap="onlyOpen" :disabled="goodData.stock<1||resouceData.leftSeconds<1">
					<text>立即开团</text>
					<text>不购课,仅带团</text>
				</button>
				<!-- #ifdef H5 -->
				<a id="toApp" href="javascript:;" data-url="groupDetail" onclick="toApp()" :data-id="resouceData.id"></a>
				<!-- #endif -->
				
				<button @tap="buy" :disabled="goodData.stock<1||resouceData.leftSeconds<1">开团且购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		name: 'pintuanBottom', //组件名称
		// 传递参数
		props: {
			resouceData: {
				type: Object,
				default: ()=>{
					return {
						leftSeconds:1
					}
				}
			}
		},
		// 组件参数
		data() {
			return {
				shopInfo: {
					id:0
				},
				goodData:{},
			}
		},
		watch:{
			resouceData(newVal){
				this.mtd1();
			}
		},
		// 组件方法
		methods: {
			mtd1() {
				this.goodData=this.resouceData.course;
				this.shopInfo=this.resouceData.course.store;
			},
			zixun() {
				let _this = this;
				if (this.isLogin) {
					uni.showLoading({
						title: '',
						mask: false
					});
					
					let toImid = _this.shopInfo.imid;
					if (getApp().globalData.TIM_SDK_READY) {
						uni.hideLoading()
						_this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid
						})
					} else {
						_this.$store.dispatch("timLogin",_this.userInfo.imid).then(res=>{
							setTimeout(() => {
								uni.hideLoading()
								_this.toPage({
									url: 'conversationDt',
									cvid: 'C2C' + toImid,
									toImId: toImid,
								})
							}, 1000)
						})
					}
				} else {
					this.toPage("login")
				}
			},
			buy() {
				if (this.isLogin) {
					if(this.resouceData.groupId){		//有进行中的拼团
						this.toPage({
							url:'myGroupDetail',
							id:this.resouceData.groupId
						})
					}else{
						let cfmArr = [this.goodData];
						uni.setStorage({
							key: 'confirmList',
							data: cfmArr,
							complete: () => {
								this.toPage({
									url: 'confirmOrder',
									isGroup:1,
									acId:this.resouceData.id
								})
							}
						})
					}
				} else {
					let cfmArr = [this.goodData];
					uni.setStorage({
						key: 'confirmList',
						data: cfmArr,
						complete: () => {
							this.toPage({
								url:'login',
								isGroup:1,
								acId:this.resouceData.id,
								to:'confirmOrder'
							})
						}
					})
				}
			},
			guanzhu() {
				if (this.isLogin) {
					this.$store.dispatch("apiFollowGood", {
						userId: this.userInfo.userId,
						linkId: this.goodData.id
					}).then(res => {
						if (res.data.code == 1) {
							if (this.goodData.fav == 0) {
								uni.showToast({
									title: '关注成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '已取消关注',
									icon: 'success'
								});
							}
			
							this.$root.getData()
						}
					})
				} else {
					this.toPage("login")
				}
			},
			onlyOpen() {
				if (this.isLogin) {
					
					if(this.resouceData.groupId){		//有进行中的拼团
						this.toPage({
							url:'myGroupDetail',
							id:this.resouceData.groupId
						})
					}else{		//没有
						this.$store.dispatch("apiOpenGroup", {
							userId: this.userInfo.userId,
							activeId:this.resouceData.id
						}).then(res => {
							if(res.data.code==1){
								uni.showToast({
									title: '开团成功',
									icon: 'success'
								});
								setTimeout(()=>{
									this.toPage({
										url:'myGroupDetail',
										id:res.data.data.id
									})
								},1500)
							}
						})
					}
				} else {
					this.toPage({
						url:'login',
						gid:this.resouceData.id,
						to:'openGroup'
					})
				}
			},
		},
		created() {
			setTimeout(()=>{
				this.mtd1()
			},500)
		}
	}
</script>

<style lang="less" scoped>
	.goodBtm {
		position: fixed;
		width: 100%;
		height: 180upx;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		z-index: 2;

		.priceBox {
			height: 75upx;
			display: flex;
			align-items: center;
			background-color: #f8e4a9;
			padding: 0 50upx;

			.iconfont {
				font-size: 40upx;
				color: #ff3b2b;
				margin-right: 16upx;
			}

			text {
				font-size: 32upx;
				color: #a17f68;
			}

			.yyPrice {
				color: #ff3b2b;
				font-size: 38upx;
				flex: 1;
			}

			.zaifu {
				color: #a17f68;
				font-size: 38upx;
			}
		}

		.stockNull {
			background-color: #333333;
			color: #FFFFFF;
			line-height: 75upx;
			text-align: center;
			font-size: 28upx;
		}

		.goodOp {
			box-sizing: border-box;
			height: 105upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 0 0 0 38upx;
			border-top: 1px solid #b5bac2;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text {
					color: #6b6b6b;
					font-size: 20upx;
				}

				.iconfont {
					font-size: 48upx;
					color: #2c2c2c;
				}
			}

			.btnBox {
				display: flex;
				height: 105upx;
				position: relative;
				button {
					width: 240upx;
					border: none;
					margin: 0;
					outline: none;
					height: 105upx;
					line-height: 105upx;
					font-size: 32upx;
					color: #FFFFFF;
					font-weight: bold;
					border-radius: 0upx;
					background: linear-gradient(to right, #ffc300, #ff9503);
				}

				button:after {
					border: none;
					outline: none;
				}

				button:first-child {
					display: flex;
					flex-direction: column;
					line-height: 1;
					justify-content: center;

					text:last-child {
						font-weight: normal;
						font-size: 24upx;
						margin-top: 4upx;
					}
				}

				button:last-child {
					background: linear-gradient(to right, #fe5828, #fe305b);
					display: flex;
					flex-direction: column;
					line-height: 1;
					justify-content: center;

				}

				button[disabled=true] {
					color: #EEEEEE;
				}
				a{
					text-decoration: none;
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					z-index: 555;
					top: 0;
					left: 0;
				}
			}
		}
	}
</style>
